<template>
  <view>
    <view
        v-if="uniPlatform === 'mp-weixin' "
        :style="'background: url(' + (path_s_url.length > 0 ? path_s_url : path_s) + ') no-repeat fixed;background-size: 100% 100%;'"
        class="container">
      <view class="drag"></view>
    </view>
    <view v-if="uniPlatform === 'mp-weixin' " class="bodyy">
      <navigator
          :openType="pages.length == 1 ? 'switchTab' : 'navigateBack'"
          :style="'top:' + nTop + 'px'"
          :url="pages.length == 1 ? '/pages/index/index4' : ''"
          class="UgobackFix"
          hoverClass="none"
      >
        <view class="i ico">{{ pages.length == 1 ? '' : '' }}</view>
      </navigator>
      <view class="sitename">
        <view class="h1">{{ h1 }}</view>
        <view class="h5">{{ h5 }}</view>
      </view>
      <view class="loadbtm">
        <view v-if="ifwin" :style="'--color:' + color + ';--rgbcolor:' + rgbcolor" class="cliadv" @tap="btnFn">
          手机号快捷登录
        </view>
        <button v-else :style="'--color:' + color + ';--rgbcolor:' + rgbcolor" class="cliadv"
                openType="getPhoneNumber" @getphonenumber="getPhoneNumber">
          手机号快捷登录
        </button>
        <view class="reg_enter">
          <text v-if="ifwin" class="reg" @tap="btnFn">没有帐号，点击注册</text>
          <button v-else class="reg" openType="getPhoneNumber" @getphonenumber="getPhoneNumber">没有帐号，点击注册
          </button>
          <navigator :style="ifwin ? 'margin-top:5rpx' : 'line-height:42rpx;'" class="enter" hoverClass="none"
                     openType="switchTab" url="/pages/index/index4">
            先逛逛
          </navigator>
        </view>
      </view>
      <view class="clause">
        <checkbox-group class="checkbox" @change="ifagreeFn">
          <label>
            <checkbox :color="color" name="ifagree" value="1"></checkbox>
            登录即表示同意
          </label>
          <navigator class="a" hoverClass="none" url="/pagesA/about/law?kind=agreement">用户服务协议</navigator>
          和
          <navigator class="a" hoverClass="none" url="/pagesA/about/law?kind=declara">个人隐私条款</navigator>
        </checkbox-group>
      </view>
    </view>
    <view v-else class="h5Login">
      <navigator
          :openType="pages.length == 1 ? 'switchTab' : 'navigateBack'"
          :style="'top:' + nTop + 'px'"
          :url="pages.length == 1 ? '/pages/index/index4' : ''"
          class="UgobackFix"
          hoverClass="none"
      >
        <view class="i ico">{{ pages.length == 1 ? '' : '' }}</view>
      </navigator>
      <view class="center">
        <view class="centerLogin">
          <view class="centerTop">
            <view class="nickText">登录注册更精彩</view>
            <view class="text">未注册手机号验证后自动注册</view>
          </view>
          <form class="formLogin">
            <view class="formLogin">
              <view class="inputBox">
                <text class="icons alyIcon-shouji"></text>
                <view class="rightBer"></view>
                <input class="inputBer" maxlength="11" placeholder="请输入手机号" type="tel">
              </view>
              <!--              <view class="inputBox">-->
              <!--                <text class="icons alyIcon-shouji"></text>-->
              <!--                <view class="rightBer"></view>-->
              <!--                <input :password="showPassword" class="inputBer" placeholder="请输入密码">-->
              <!--                <text :class="[showPassword ? 'alyIcon-chakanmima1':'alyIcon-chakanmima','icoP']"-->
              <!--                      @tap="changePassword"></text>-->
              <!--              </view>-->
              <view class="inputBox">
                <text class="icons alyIcon-yanzhengma"></text>
                <view class="rightBer"></view>
                <input class="inputBer" maxlength="6" placeholder="请输入验证码" style="width: 40%;" type="number">
                <text :class="['bntTxt']" @click="onCode">{{ codeText }}</text>
              </view>
            </view>

            <view class="clause">
              <checkbox-group class="checkbox" @change="ifagreeFn">
                <label>
                  <checkbox :color="color" name="ifagree" value="1"></checkbox>
                  登录即表示同意
                </label>
                <navigator class="a" hoverClass="none" url="/pagesA/about/law?kind=agreement">用户服务协议</navigator>
                和
                <navigator class="a" hoverClass="none" url="/pagesA/about/law?kind=declara">个人隐私条款</navigator>
              </checkbox-group>
            </view>
            <view class="sutBnt">
              <button class="bnt" @click="regbtnFn">登录/注册</button>
            </view>
          </form>
        </view>
      </view>
    </view>
    <view v-if="div_login" class="mask1 alpha0_100">
      <view
          :style="'--div_box_width:75%;--div_box_height:550rpx;background:-webkit-linear-gradient(top,rgba(' + rgbcolor + ',.3),#fff 25%);background-color: #fff;'"
          class="div_box big_normal"
      >
        <view class="S18 h2">服务协议及隐私保护</view>
        <view class="S15">
          为了更好地保障您的合法权益，请您阅读并同意以下协议
          <navigator :style="'color:' + color + ';'" hoverClass="none" url="/pagesA/about/law?kind=agreement">
            《用户服务协议》
          </navigator>
          和
          <navigator :style="'color:' + color + ';'" hoverClass="none" url="/pagesA/about/law?kind=declara">
            《个人隐私条款》
          </navigator>
        </view>
        <button :style="'--color:' + color + ';--rgbcolor:' + rgbcolor" class="btn5" openType="getPhoneNumber"
                @getphonenumber="getPhoneNumber">同意
        </button>
        <view class="C999 S18" @tap="back">不同意</view>
      </view>
    </view>
    <privacy-popup @agree="privacy_agree" @disagree="privacy_disagree"></privacy-popup>
  </view>


</template>
<script>
import privacyPopup from '../../components/privacyPopup/privacyPopup';

var a = require('../../res/www.a9a.cn.js');
var app = getApp();
export default {
  components: {
    privacyPopup
  },
  data() {
    return {
      ifwin: true,
      tguid: '',
      admid: '',
      loading: '',
      path_s: '',
      path_s_url: '',
      color: '',
      rgbcolor: '',
      h1: '',
      h5: '',
      MB: '',
      div_login: false,
      pages: [],
      nTop: '',
      uniPlatform: '',
      showPassword: true, // 显示密码
      loginForm: {
        tel: '',
        password: '',
        code: '',
      },
      isCode: false,
      timing: 60,
      timekeeping: 0,
      timer: null // 定时器方法
    };
  },
  computed: {
    codeText() {
      return this.isCode ? `重新发送${this.timekeeping}s` : '获取验证码'
    },
  },
  onLoad: function (t) {
    const systemInfo = uni.getSystemInfoSync();
    this.uniPlatform = systemInfo.uniPlatform
    var n = t.tguid;
    var e = t.admid;
    var that = this;
    that.setData({
      tguid: n,
      admid: e
    });
    console.log('u-login->  tguid=' + n);
    console.log('u-login->  admid=' + e);
    app.globalData.ajax({
      url: 'loading.php',
      data: {
        submitok: 'getvar'
      },
      success: function (i) {
        1 == i.flag
            ? that.setData({
              loading: i.loading,
              path_s: i.loading.path_s,
              path_s_url: i.loading.path_s_url,
              color: i.color,
              rgbcolor: a.c16_rgb(i.color),
              h1: i.h1,
              h5: i.h5,
              MB: i.MB
            })
            : uni.showToast({
              title: i.msg,
              icon: 'none',
              mask: true
            });
      }
    });
    app.globalData.get_navigationBarTopHeight(this);
  },
  onShow: function () {
    app.globalData.chklogin().then(function (a) {
      if (a) {
        uni.switchTab({
          url: '/pages/my/my'
        });
      }
    });
  },
  onShareAppMessage: function () {
    return {
      imageUrl: this.loading.share.imgurl,
      title: this.loading.share.title,
      path: '/pages/login/login'
    };
  },
  onShareTimeline: function () {
    return {
      imageUrl: this.loading.share.imgurl,
      title: this.loading.share.title,
      query: '',
      path: '/pages/login/login'
    };
  },
  methods: {
    ifagreeFn: function (a) {
      1 == a.detail.value
          ? this.setData({
            ifwin: false
          })
          : this.setData({
            ifwin: true
          });
    },

    btnFn: function () {
      a.empty(this.MB) || app.globalData.openSetting(this.MB);
      this.setData({
        div_login: true
      });
    },

    getPhoneNumber: function (a) {
      var t = this.tguid;
      var n = this.admid;
      app.globalData.getPhoneNumber({
        e: a,
        tguid: t,
        admid: n,
        url: '/pagesA/registrationInformation/registrationInformation?tguid=' + t + '&admid=' + n,
        urlkind: 'navigateTo'
      });
    },

    back: function () {
      this.setData({
        div_login: false
      });
    },

    privacy_agree: function (a) {
      console.log('agree');
    },

    privacy_disagree: function (a) {
      console.log('disagree');
      uni.exitMiniProgram();
    },
    // 获取验证码
    onCode() {
      if (this.isCode) return
      // 获取验证码逻辑
      this.verifyRobot()

      // this.timekeeping = this.timing
      // this.isCode = true
      // this.timer = setInterval(() => {
      //   this.timekeeping--
      //   if (this.timekeeping <= 0) {
      //     this.stopCountdown()
      //   }
      // }, 1000)
    },
    // 验证机器人
    verifyRobot() {
      const that = this;
      // url: 'https://www.youfenglove.com/m/login.php?submitok=ajax_click_yzm',

      uni.request({
        url: '/m/login.php',
        method: "GET",  // 修正参数名并大写
        data: {
          submitok: 'ajax_click_yzm',
        },
        header: {'content-type': 'application/json'},
        success: function (a) {
          console.log('获取到的值', a)
        }
      });
      // app.globalData.ajax({
      //   url: 'login.php',
      //   data: {
      //     submitok: 'ajax_click_yzm',
      //   },
      //   success: function (data) {
      //     console.log('获取到验证吗', data);
      //     if (1 === data.flag) {
      //
      //     } else {
      //       if ('nobm' === i.flag) {
      //       } else {
      //         uni.showToast({
      //           title: i.msg,
      //           icon: 'none',
      //           mask: true
      //         });
      //       }
      //     }
      //     uni.hideLoading();
      //   }
      // });
    },
    // 关闭定时器
    stopCountdown() {
      clearInterval(this.timer)
      this.isCode = false
      this.timekeeping = 0
    },
    // 显示密码
    changePassword() {
      this.showPassword = !this.showPassword;
    },
    //登录/注册
    regbtnFn() {

    },
  }
};
</script>
<style lang="scss" scoped>
@import './login.css';


.h5Login {
  width: 100%;
  background-color: #ffffff;
  min-height: 100vh;

  .center {
    padding-top: 30%;

    .centerLogin {
      width: 80%;
      margin: 20rpx auto;

      .centerTop {

        .nickText {
          font-size: 60rpx;
          color: #000000;
          /*font-weight: 600;*/
        }

        .text {
          color: #aaaaaa;
        }
      }

      .formLogin {
        margin-top: 40rpx;

        .inputBox {
          width: 100%;
          margin-top: 60rpx;
          display: flex;
          align-items: center;
          height: 90rpx;
          line-height: 90rpx;
          background-color: #f8f8f8;
          border-radius: 60rpx;

          .icons {
            font-size: 20px;
            color: #aaaaaa;
            padding-left: 40rpx;
          }

          .rightBer {
            width: 1px;
            height: 40rpx;
            background-color: #bcbcbc;
            margin: 0 30rpx;
          }

          .inputBer {
            width: 65%;
            border: none;
            outline: none;
            background: transparent;
            font-size: 14px;
          }

          .icoP {
            color: #aaaaaa;
            font-size: 20px;
            margin-left: 10rpx;
          }

          .bntTxt {
            display: inline-block;
            width: 40%;
            color: #000000;
            font-size: 30rpx;
            text-align: right;
            margin-right: 30rpx;
          }
        }
      }

      .clause {
        color: #999;
        text-align: center;
        margin-top: 40rpx;

        .a {
          color: #000000;
          display: inline-block;
          margin: 0 10rpx;
          height: 44rpx;
          line-height: 44rpx;
        }

        .checkbox {
          height: 44rpx;
          line-height: 44rpx;
          border-radius: 2rpx;
          margin-right: 5rpx;
          vertical-align: middle;
        }

      }

      .sutBnt {
        .bnt {
          margin-top: 40rpx;
          border-radius: 40rpx;
          height: 80rpx;
          line-height: 80rpx;
          font-size: 32rpx;
          color: #ffffff;
          box-shadow: 0 .3rem .8rem rgba(131, 22, 215, .4);
          background: -webkit-linear-gradient(315deg, rgba(131, 22, 215, .6) 0%, #8316d7 100%);
        }
      }
    }
  }
}
</style>
